<template>
    <div
        class="container-body article-list-body"
        :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
    >
        <!-- 二级板块 -->
        <div
            class="sub-board"
            v-if="pBoardId"
        >
            <span :class="['board-item', boardId == 0 ? 'active' : '']"><router-link
                    :to="`/forum/${pBoardId}`">全部</router-link></span>
            <span
                v-for="item in subBoardList"
                :key="item.id"
                :class="['board-item', item.boardId == boardId ? 'active' : '']"
            >
                <router-link :to="`/forum/${item.pBoardId}/${item.boardId}`">{{ item.boardName }}</router-link>
            </span>
        </div>
        <div class="article-panel">
            <div class="top-tab">
                <div
                    :class="['tab', orderType == 0 ? 'active' : '']"
                    @click="changeOrderType(0)"
                >热榜</div>
                <el-divider direction="vertical"></el-divider>
                <div
                    :class="['tab', orderType == 1 ? 'active' : '']"
                    @click="changeOrderType(1)"
                >发布时间</div>
                <el-divider direction="vertical"></el-divider>
                <div
                    :class="['tab', orderType == 2 ? 'active' : '']"
                    @click="changeOrderType(2)"
                >最新</div>
            </div>
            <div class="article-list">
                <DataList
                    noDataMsg="暂无数据, 快去发布吧~"
                    :loading="loading"
                    :dataSource="articleListInfo"
                    @loadData="loadArticle"
                >
                    <template #default="{ data }">
                        <ArticleListItem
                            :showComment="showComment"
                            :data="data"
                        ></ArticleListItem>
                    </template>
                </DataList>
                <div
                    v-for="item in articleListInfo.list"
                    :key="item"
                >
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import ArticleListItem from './ArticleListItem.vue';
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const route = useRoute();
import { watch } from 'vue';
import { useStore } from 'vuex';

const store = useStore()
// 二级板块
const pBoardId = ref(0);
const boardId = ref(0);


const api = {
    loadArticle: '/forum/loadArticle',
}

const orderType = ref(0)
const changeOrderType = (type) => {
    orderType.value = type;
    loadArticle();
}

const loading = ref(false)
const articleListInfo = ref({})
const loadArticle = async () => {
    loading.value = true
    let params = {
        pageNo: articleListInfo.value.pageNo,
        boardId: boardId.value,
        pBoardId: pBoardId.value,
        orderType: orderType.value
    }
    let result = await proxy.Request({
        url: api.loadArticle,
        params: params,
        showLoading: false
    })
    loading.value = false
    if (!result) {
        return
    }
    articleListInfo.value = result.data
}

// 二级板块
const subBoardList = ref([]);
const setSubBoard = () => {
    subBoardList.value = store.getters.getSubBoardList(pBoardId.value)
}

// 监听路由变化
watch(() => route.params, (newVal, oldVal) => {
    pBoardId.value = newVal.pBoardId;
    boardId.value = newVal.boardId || 0;
    store.commit("setactivePBoardId", newVal.pBoardId);
    store.commit("setactiveBoardId", newVal.boardId);
    setSubBoard();
    loadArticle();
}, { immediate: true, deep: true });

watch(() => store.state.boardList, (newVal, oldVal) => {
    setSubBoard();
}, { immediate: true, deep: true });

const showComment = ref(false)

// 监听系统设置
watch(() => store.state.sysSetting, (newVal, oldVal) => {
    if (newVal) {
        showComment.value = newVal.commentOpen
    }
}, { immediate: true, deep: true });
</script>

<style lang="scss" scoped>
.article-list-body {


    .sub-board {
        padding: 10px 0px;

        .board-item {
            background: #fff;
            color: #909090;
            padding: 2px 10px;
            border-radius: 15px;
            cursor: pointer;
            margin-right: 10px;
            font-size: 14px;
        }

        a {
            text-decoration: none;
            color: #909090;
        }

        .active {
            background: var(--link);

            a {
                color: #fff;
            }
        }
    }

    .article-panel {
        background: #fff;

        .top-tab {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            font-size: 15px;
            border-bottom: 1px solid #ddd;

            .tab {
                cursor: pointer;
            }

            .active {
                color: var(--link);
            }
        }
    }


}
</style>
